<template>
   <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="$refs['formRef'].resetFields()">
      <el-form :model="formData" ref="formRef" label-width="130px" label-suffix=":"
               :disabled="true">
         <el-row>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="订单编号" prop="orderCode">
                  <el-input v-model="formData.orderCode"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="下单时间" prop="orderDate">
                  <el-input v-model="formData.orderDate"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="用户编号" prop="userCode">
                  <el-input v-model="formData.userCode"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="用户名称" prop="userName">
                  <el-input v-model="formData.userName"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="订单总金额" prop="totalMoney">
                  <el-input v-model="formData.totalMoney"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="收货人" prop="receiveUser">
                  <el-input v-model="formData.receiveUser"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="收货电话" prop="receivePhone">
                  <el-input v-model="formData.receivePhone"/>
               </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-right: 40px;">
               <el-form-item label="收货地址" prop="receiveAddress">
                  <el-input v-model="formData.receiveAddress"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="是否付款" prop="isPay">
                  <el-input v-model="formData.isPay"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="付款时间" prop="payDate">
                  <el-input v-model="formData.payDate"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="是否发货" prop="isSend">
                  <el-input v-model="formData.isSend"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="发货时间" prop="sendDate">
                  <el-input v-model="formData.sendDate"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="发货物流单号" prop="sendNo">
                  <el-input v-model="formData.sendNo"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="是否收货" prop="isReceive">
                  <el-input v-model="formData.isReceive"/>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="dialogClose">关 闭</el-button>
         <el-button type="primary" @click="mSendOrder" v-if="formData.isPay=='是' && formData.isSend=='否'">发 货</el-button>
      </template>
      <!--订单明细的表格数据-->
      <div>
         <el-table :data="table.data" border ref="tableRef" row-key="rowID" v-loading="table.showLoading">
            <!-- 序号 -->
            <el-table-column width="60" label="序号" align="left" type="index"
                             fixed="left"></el-table-column>
            <!-- 数据列 -->
            <template v-for="(item, index) in table.column">
               <el-table-column :prop="item.prop" :label="item.label"
                                :show-overflow-tooltip="true"></el-table-column>
            </template>
         </el-table>
      </div>
   </el-dialog>
</template>
<script>
import axiosUtil from '@/utils/axiosUtil'

export default {
   data() {
      return {
         //控制对话框显示
         dialogVisible: false,
         //控制对话框标题
         dialogTitle: '订单详情',
         //对话框操作模式：详情，新增，修改，根据不同的模式，控制页面展示，也可以把详情，新增，修改分别创建成三个视图，每个视图的代码逻辑更加简单
         opMode: '',
         //表单数据定义
         formData: {
            id: '',
            orderCode: '',
            orderDate: '',
            userCode: '',
            userName: '',
            totalMoney: '',
            receiveUser: '',
            receivePhone: '',
            receiveAddress: '',
            isPay: '',
            payDate: '',
            isSend: '',
            sendDate: '',
            sendNo: '',
            isReceive: '',
            receiveDate: '',
            remark: ''
         },
         //订单明细的表格数据和列展示定义，订单明细表格不提供分页
         table: {
            data: [],
            column: [
               {'prop': 'bookCode', 'label': '图书编号'},
               {'prop': 'bookName', 'label': '图书名称'},
               {'prop': 'buyPrice', 'label': '采购单价'},
               {'prop': 'buyQty', 'label': '购买数量'},
            ],
            showLoading: false
         }
      }
   },
   methods: {
      //显示对话框，给父组件调用的方法
      mShowDialog(type, row) {
         this.opMode = type;
         this.dialogVisible = true;

         if (type == 'detail')
            this.dialogTitle = '订单详情';

         //新增和修改的时候，获取要展示的数据
         if (type == 'detail') {
            axiosUtil.get({
               url: '/admin/orderInfo/getDetail',
               data: {
                  orderCode: row.orderCode
               },
               success: res => {
                  //返回订单主表
                  Object.keys(this.formData).forEach((key) => {
                     this.formData[key] = res.data.orderInfo[key];
                  })
                  //返回订单明细表格数据
                  this.table.data = res.data.detailList;
               }
            })
         }
      },
      //关闭和重置对话框
      dialogClose() {
         console.info('对话框关闭');
         this.dialogVisible = false;
      },
      //发货
      mSendOrder() {
         this.$prompt('请输入物流单号', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /\S/,
            inputErrorMessage: '物流单号不能为空'
         }).then(({value}) => {
            axiosUtil.postForm({
               url: '/admin/orderInfo/sendOrder',
               data: {
                  orderCode: this.formData.orderCode,
                  sendNo: value
               },
               success: res => {
                  this.$message.info('发货成功');
                  this.dialogVisible = false;
                  this.$emit('refleshData');
               }
            })
         }).catch(() => {
            this.$message.info('已取消');
         });
      }
   }
}
</script>
<style>
</style>